<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	
	<title>Sample Dojo / Dijit Page</title>
	<style type="text/css">
		#container {
			position:absolute;
			left:-9999px;
			width:9000px;
			overflow:hidden;
		}
		#randomimage {
			height:100px;
		}
	</style>
	<!-- load Dojo -->
	<script>var djConfig = { isDebug:true }</script>
	<script src="../../../dojo/dojo.js"></script>
	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.addOnLoad(function(){
			
			doh.register("testUi",
				[
					{
						name:"basic onload",
						timeout:7000,
						runTest: function(t){
							var d = new doh.Deferred();
							
							try{
								var n = dojo.create("img", null, "container");
							}catch(e){
								d.errback(e);
							}
							dojo.connect(n, "onload", function(e){
								try{
									t.is("load", e.type);
									t.is(359, n.height, "height mismatch");
									t.is(359, n.width, "width mismatch");
								}catch(e){
									d.errback(e);
									return;
								}
								d.callback(true);
							});
							
							n.src = "images/square.jpg";
							return d;
						}
					},
					{
						name:"basic onload, probably cached",
						timeout:17000,
						runTest: function(t){
							var d = new doh.Deferred();
							
							try{
								var n = dojo.create("img", null, "container");
							}catch(e){
								d.errback(e);
							}
							dojo.connect(n, "onload", function(e){
								try{
									t.is("load", e.type);
									t.is(359, n.height);
									t.is(359, n.width);
								}catch(e){
									d.errback(e);
									return;
								}
								d.callback(true);
							});
							n.src = "images/square.jpg";
							
							return d;
						}
					},
					{
						name:"set src after long delay",
						timeout:5000,
						runTest: function(t){
							var d = new doh.Deferred();
							
							var n = dojo.place("<img id='bar'/>", "container");
							dojo.connect(n, "onload", function(){
								t.is(375, n.height);
								t.is(500, n.width);
								d.callback(true);
							})
							
							setTimeout(function(){
								n.src = "images/chris1_lg.jpg";
							}, 2000)
							
							return d;
						}
					},
					{
						name:"test re-calling of onload",
						timeout:9000,
						runTest: function(t){
							var d = new doh.Deferred();
							
							var called = 0;
							var n = dojo.create("img", null, "container");
							
							dojo.connect(n, "onload", function(e){
								called++;
								if(called == 2){
									d.callback(true);
								}
							});

							n.src = "images/chris1_sm.jpg";
							
							setTimeout(function(){
								n.src = "images/chris1_sm.jpg?" + (new Date().getTime());
							}, 1000);
							
							return d;
						}
					},
					{
						name:"testing the sizes, styled by js (height)",
						timeout:9000,
						runTest: function(t){
							var d = new doh.Deferred();
							
								var newn = dojo.create("img", null, "container");
								dojo.style(newn, "height", "100px");
								
								dojo.connect(newn, "onload", function(e){
									try{
										t.is(100, newn.height);
										t.is(100, newn.width);
										d.callback(true);
									}catch(e){
										d.errback(e);
									}
								});
								newn.src = "images/square.jpg";
								
								
							return d;
						}
					},
					{
						name:"testing the sizes, styled by js (width)",
						timeout:9000,
						runTest: function(t){
							var d = new doh.Deferred();
							
								var newn = dojo.create("img", null, "container");
								dojo.style(newn, "width", "100px");
								
								dojo.connect(newn, "onload", function(e){
									try{
										t.is(100, newn.height);
										t.is(100, newn.width);
										d.callback(true);
									}catch(e){
										d.errback(e);
									}
								});
								newn.src = "images/square.jpg";
								
							return d;
						}
					},
					{
						name:"testing the sizes, styled by js (both)",
						timeout:9000,
						runTest: function(t){
							var d = new doh.Deferred();
							
								var newn = dojo.create("img", null, "container");
								dojo.style(newn, { "height":"100px", "width":"100px" });
								
								dojo.connect(newn, "onload", function(e){
									try{
										t.is(100, newn.height);
										t.is(100, newn.width);
										d.callback(true);
									}catch(e){
										d.errback(e);
									}
								});
								newn.src = "images/square.jpg";
								
								
							return d;
						}
					},
//					{
//						name:"testing the sizes, styled by css (no .src)",
//						timeout:9000,
//						runTest: function(t){
//							var d = new doh.Deferred();
//							
//								var newn = dojo.byId("randomimage");
//								dojo.connect(newn, "onload", function(e){
//									try{
//										t.is(100, newn.height);
//										t.is(100, newn.width);
//										d.callback(true);
//									}catch(e){
//										d.errback(e);
//									}
//								});
//								
//								// janky here?:
//								setTimeout(function(){
//									if(dojo.isOpera){
//										d.callback("expecting opera not to fire onload?");
//									}
//								}, 8500)
//								
//							return d;
//						}
//					},
//					{
//						name:"testing the sizes, styled by css (set .src)",
//						timeout:9000,
//						runTest: function(t){
//							var d = new doh.Deferred();
//							
//								var newn = dojo.byId("randomimage");
//								dojo.connect(newn, "onload", function(e){
//									try{
//										t.is(100, newn.height);
//										t.is(100, newn.width);
//										d.callback(true);
//									}catch(e){
//										d.errback(e);
//									}
//								});
//								newn.src = "images/square.jpg";
//								
//							return d;
//						}
//					},
					{
						name:"testing the sizes, styled by attr ",
						timeout:9000,
						runTest: function(t){
							var d = new doh.Deferred();
							
							var newn = dojo.byId("randomimage");
							dojo.connect(newn, "onload", function(e){
								try{
									t.is(100, newn.height);
									t.is(100, newn.width);
									d.callback(true);
								}catch(e){
									d.errback(e);
								}
							});
							newn.height = 100;
							newn.src = "images/square.jpg";
								
							return d;
						}
					},
					{
						
						name:"load event does not bubble",
						timeout:4000,
						runTest: function(t){

							var d = new doh.Deferred();

							var bubbles; // it doesn't bubble, btw.
							var c = dojo.byId("container2")
							var x = dojo.connect(c, "load", function(){
								d.errback("Should not fire");
								dojo.disconnect(x);
							});
							
							dojo.create("img", { src:"images/square.jpg" }, "container2");
							setTimeout(function(){
								dojo.disconnect(x);
								d.callback(true);
							}, 3000);
							
							return d;
						}
						
					}
				]
			);
			
			doh.run();	
			
//			
//			var setimg = dojo.create("img", { src:"../rockstar.jpg" });
//			setimg.width = 175;
//			dojo.connect(setimg, "onload", function(e){
//				console.log("attr'd onload", img.height, dojo.style(img, "height"), img.offsetHeight, img.naturalHeight);
//			});
//			
			
		});
	</script>

</head>
<body class="tundra">
	<h2>These tests are all expected to take a long time (image loading)</h2>
	<p>Some of them might fail</p>
	<div id="container">
		<div id="container2"></div>
	</div>
	<img id="randomimage" src="images/square.jpg">
	<img id="fixedimage">
</body>
</html>